{% extends "./inc/base.html" %}
{% block style %}
<link rel="stylesheet" href="/static/admin/js/hswx/css/hs_self_menu.css" type="text/css"/>
<link rel="stylesheet" href="/static/admin/js/hswx/css/hs_wx_base.css" type="text/css"/>
{% endblock %}
{% block content %}
<section class="vbox">
    <section id="bjax-target">
        <section class="hbox stretch">

            <!-- side content -->
            {% include "./inc/mp_side.html" %}
            <!-- / side content -->

            <section>
                <section class="vbox" style="background:#fff">
                    <header class="header bg-light b-b">
                        <p>{{controller.meta_title}}</p>
                    </header>
                    
                    <section class="scrollable wrapper">
                        
                            
                        <section id="conditionals" class="panel panel-default" style="background-color:#f4f5f9; padding:15px;display:none;">
                            <!-- 个性化 start -->
                            <div class="hs-personality-conditions">
                                
                                <div class="hs-matchrule-div">
                                    <label>用户分组</label>
                                    <select name="group_id" class="form-control">
                                        <option value="closed">不限定</option>
                                    </select>
                                </div>
                                
                                <div class="hs-matchrule-div">
                                    <label>性别</label>
                                    <select name="sex" class="form-control">
                                        <option value="closed">不限定</option>
                                        <option value="1">男</option>
                                        <option value="2">女</option>
                                    </select>
                                </div>
                                
                                <div class="hs-matchrule-div">
                                    <label>手机系统</label>
                                    <select name="client_platform_type" class="form-control">
                                        <option value="closed">不限定</option>
                                        <option value="1">IOS</option>
                                        <option value="2">Android</option>
                                        <option value="3">Others（其它）</option>
                                    </select>
                                </div>
                                
                                <div class="hs-matchrule-div">
                                    <label>地区</label>
                                    <select name="country" class="form-control">
                                        <option value="closed">不限国家</option>
                                        <option value="中国">中国</option>
                                    </select>
                                </div>
                                
                                <div class="hs-matchrule-div hs-hide">
                                    <label style="visibility:hidden">省份</label>
                                    <select name="province" class="form-control">
                                        <option value="closed">不限省份</option>
                                        <option></option>
                                    </select>
                                </div>
                                
                                <div class="hs-matchrule-div hs-hide">
                                    <label style="visibility:hidden">城市</label>
                                    <select name="city" class="form-control">
                                        <option value="closed">不限城市</option>
                                        <option></option>
                                    </select>
                                </div>
                                
                                <div class="hs-matchrule-div">
                                    <label>客户端语言</label>
                                    <select name="language" class="form-control">
                                        <option value="closed">不限定</option>
                                        <option value="zh_CN">简体中文</option>
                                        <option value="zh_TW">繁体中文TW</option>
                                        <option value="zh_HK">繁体中文HK</option>
                                        <option value="en">英文</option>
                                        <option value="id">印尼</option>
                                        <option value="ms">马来</option>
                                        <option value="es">西班牙</option>
                                        <option value="ko">韩国</option>
                                        <option value="it">意大利</option>
                                        <option value="ja">日本</option>
                                        <option value="pl">波兰</option>
                                        <option value="pt">葡萄牙</option>
                                        <option value="ru">俄国</option>
                                        <option value="th">泰文</option>
                                        <option value="vi">越南</option>
                                        <option value="ar">阿拉伯语</option>
                                        <option value="hi">北印度</option>
                                        <option value="he">希伯来</option>
                                        <option value="tr">土耳其</option>
                                        <option value="de">德语</option>
                                        <option value="fr">法语</option>
                                    </select>
                                </div>
                            </div>
                            <!-- 个性化 end -->
                        </section>
                        
                        
                        <div class="hs-ui clearfix">
                            <div class="hs-ph-area">
                                <div class="hs-ph-view">
                                    <div class="hs-ph-hd"></div>
                                    <div class="hs-ph-bd">
                                        <ul class="hs-menu-ul">
                                            <!--<li class="hs-menu-li sizeof2">
                                                <a class="hs-menu-a hs-current" href="javascript:void(0)">
                                                    
                                                    <i></i>
                                                    <span>菜单名称</span>
                                                </a>
                                                
                                                <div class="hs-menu-sub">
                                                    <ul class="hs-menu-sub-ul">
                                                        <li class="hs-menu-sub-li">
                                                            <a class="hs-menu-a" href="javascript:void(0)">
                                                                <em class="hs-sub-inner">
                                                                    <i></i>
                                                                    <span>菜单名称1</span>
                                                                </em>
                                                            </a>
                                                        </li>
                                                        <li class="hs-menu-sub-li">
                                                            <a class="hs-menu-a hs-current" href="javascript:void(0)">
                                                                <em class="hs-sub-inner">
                                                                    <i></i>
                                                                    <span>菜单名称2</span>
                                                                </em>
                                                            </a>
                                                        </li>
                                                        <li class="hs-menu-sub-li">
                                                            <a class="hs-menu-a" href="javascript:void(0)">
                                                                <em class="hs-sub-inner">
                                                                    <span class="hs-madd"></span>
                                                                </em>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>-->
                                            
                                            <li class="hs-menu-li hs-menu-item-add">
                                                <a class="hs-nocan" href="javascript:void(0)">
                                                    <span class="hs-madd"></span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>	
                                </div>
                            </div> 
                            
                            <div class="hs-ph-edit">
                                <div class="hs-menuright-box">
                                    <div class="hs-menuright-hd">
                                        <div class="hs-menuright-row">
                                            <h4 class="hs-menutitle">菜单名称</h4>
                                            <a class="hs-menuright-del" href="javascript:void(0)">删除菜单</a>
                                        </div>
                                    </div>
                                    <div class="hs-menuright-bd">
                                        <div class="hs-menuright-mname">
                                            <label class="hs-menuright-mlabel">菜单名称</label>
                                            <div class="hs-menuright-mlabelr">
                                                <span class="hs-menuright-ipt">
                                                    <input class="hs-menuright-iptval" type="text"  id="hsCurrentMenuName" />
                                                </span>
                                            </div>
                                        </div>
                                        <div class="hs-menuright-mval">
                                            <div class="hs-menuright-row">
                                                <label class="hs-menuright-mlabel">菜单内容</label>
                                                <div class="hs-menuright-mlabelr">
                                                    <label class="">
                                                        <input class="hs-ico-control" type="radio" name="nnn" value="1" />
                                                        <i class="hs-ico-radio"></i>
                                                        <span>发送消息</span>
                                                    </label>
                                                    <label class="">
                                                        <input class="hs-ico-control" type="radio" name="nnn" value="2"/>
                                                        <i class="hs-ico-radio"></i>
                                                        <span>跳转网页</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="hs-menuright-row" style="margin-top:15px">
                                                <!--row start-->
                                                <div class="hs-menuright-panel hs-mrp1">
                                                    <!--编辑 start-->
                                                    <div style="background:#fff">
                                                        <div class="hs-ui-beditor hs-js-tab hs-auto">
                                                            <div class="hs-etap-nav">
                                                                <ul>
                                                                    <li jstab-target="newsArea" class="hs-etap-one hs-etap-news active">
                                                                        <a href="javascript:void(0);" onclick="return false;">&nbsp;<i class="hs-etap-icon"></i><span class="hs-etap-title">图文</span></a>
                                                                    </li>
                                                                    <li jstab-target="imageArea" class="hs-etap-one hs-etap-image">
                                                                        <a href="javascript:void(0);" onclick="return false;">&nbsp;<i class="hs-etap-icon"></i><span class="hs-etap-title">图片</span></a>
                                                                    </li>
                                                                    <li jstab-target="audioArea" class="hs-etap-one hs-etap-audio">
                                                                        <a href="javascript:void(0);" onclick="return false;">&nbsp;<i class="hs-etap-icon"></i><span class="hs-etap-title">语音</span></a>
                                                                    </li>
                                                                    <li jstab-target="videoArea" class="hs-etap-one hs-etap-video">
                                                                        <a href="javascript:void(0);" onclick="return false;">&nbsp;<i class="hs-etap-icon"></i><span class="hs-etap-title">视频</span></a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="hs-etap-panel">
                                                                <div jstab-des="newsArea" class="hs-etap-content">
                                                                    <div class="hs-etap-newsArea hs-inner">
                                                                        <!--** ---图文--- ***-->
                                                                        <div id="newsxz">
                                                                            <div class="hs-con-cover">
                                                                                <div class="hs-media-cover">
                                                                                    <span class="hs-create-access">
                                                                                        <a href="javascript:;" id="hsSelNewsBtn">
                                                                                            <i class="hs-icon36 hs-icon36-add"></i>
                                                                                            <strong>从素材库中选择</strong>
                                                                                        </a>
                                                                                    </span>
                                                                                </div>
                                                                                <div class="hs-media-cover">
                                                                                    <span class="hs-create-access">
                                                                                        <a href="javascript:;">
                                                                                            <i class="hs-icon36 hs-icon36-add"></i>
                                                                                            <strong>新建素材</strong>
                                                                                        </a>
                                                                                    </span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div id="newssed"></div>
                                                                        <!--*****-->
                                                                    </div>
                                                                </div>
                                                                <div jstab-des="imageArea" class="hs-etap-content" style="display: none;">
                                                                    <div class="hs-etap-imageArea hs-inner">
                                                                        <div class="hs-con-cover">
                                                                            <div class="hs-media-cover">
                                                                                <span class="hs-create-access">
                                                                                    <a href="javascript:;">
                                                                                        <i class="hs-icon36 hs-icon36-add"></i>
                                                                                        <strong>从素材库中选择</strong>
                                                                                    </a>
                                                                                </span>
                                                                            </div>
                                                                            <div class="hs-media-cover">
                                                                                <span class="hs-create-access">
                                                                                    <a href="javascript:;">
                                                                                        <i class="hs-icon36 hs-icon36-add"></i>
                                                                                        <strong>上传图片</strong>
                                                                                    </a>
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div jstab-des="audioArea" class="hs-etap-content" style="display: none;">
                                                                    <div class="hs-etap-audioArea hs-inner">
                                                                        <div class="hs-con-cover">
                                                                            <div class="hs-media-cover">
                                                                                <span class="hs-create-access">
                                                                                    <a href="javascript:;">
                                                                                        <i class="hs-icon36 hs-icon36-add"></i>
                                                                                        <strong>从素材库中选择</strong>
                                                                                    </a>
                                                                                </span>
                                                                            </div>
                                                                            <div class="hs-media-cover">
                                                                                <span class="hs-create-access">
                                                                                    <a href="javascript:;">
                                                                                        <i class="hs-icon36 hs-icon36-add"></i>
                                                                                        <strong>新建语音</strong>
                                                                                    </a>
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div jstab-des="videoArea" class="hs-etap-content" style="display: none;">
                                                                    <div class="hs-etap-videoArea hs-inner">
                                                                        <div class="hs-con-cover">
                                                                            <div class="hs-media-cover">
                                                                                <span class="hs-create-access">
                                                                                    <a href="javascript:;">
                                                                                        <i class="hs-icon36 hs-icon36-add"></i>
                                                                                        <strong>从素材库中选择</strong>
                                                                                    </a>
                                                                                </span>
                                                                            </div>
                                                                            <div class="hs-media-cover">
                                                                                <span class="hs-create-access">
                                                                                    <a href="javascript:;">
                                                                                        <i class="hs-icon36 hs-icon36-add"></i>
                                                                                        <strong>新建视频</strong>
                                                                                    </a>
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--编辑 end-->
                                                </div>
                                                <div class="hs-menuright-panel hs-mrp2">
                                                    <div class="hs-menuright-rediect">
                                                        <form onsubmit="return false;">
                                                            <p class="hs-c-8d8d8d">订阅者点击该菜单会跳到以下链接</p>
                                                            <div class="">
                                                                <label class="hs-menuright-mlabel">页面地址</label>
                                                                <div class="hs-menuright-mlabelr">
                                                                    <span class="hs-menuright-ipt ">
                                                                        <!--hs-spandisabled-->
                                                                        <input class="hs-menuright-iptval" type="text" id="hsUrlValue" name=""  />
                                                                    </span>
                                                                    <div class="hs-clearfix"></div>
                                                                    <a href="javascript:void(0)" class="hs-handle-a" >从公众号图文消息中选择</a>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                                <!--row end-->								
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            

                        </div>
                        <div class="hs-clearfix" style="padding-left: 332px;padding-top: 30px">
                            <button class="btn btn-success " type="button" id="hsSubmitSave">保存</button>
                            <button class="btn btn-info " type="button" id="hsSubmitSyncWx">生成微信菜单</button>
                        </div>
                    </section>
                </section>
            </section>
        </section>
    </section>

</section>
{% endblock %}

{% block script%}
<script src="/static/admin/js/hswx/js/hs_js_common.js"></script>
<script type="text/javascript">
    $(function(){
        var chinaProvince = ["上海", "云南", "内蒙古", "北京", "台湾", "吉林", "四川", "天津", "宁夏", "安徽", "山东", "山西", "广东", "广西", "新疆", "江苏", "江西", "河北", "河南", "浙江", "海南", "湖北", "湖南", "澳门", "甘肃", "福建", "西藏", "贵州", "辽宁", "重庆", "陕西", "青海", "香港", "黑龙江"];
        var chinaCity = {"上海":["卢湾","嘉定","奉贤","宝山","崇明","徐汇","普陀","杨浦","松江","浦东新区","虹口","金山","长宁","闵行","闸北","青浦","静安","黄浦"],"云南":["临沧","丽江","保山","大理","德宏","怒江","文山","昆明","昭通","普洱","曲靖","楚雄","玉溪","红河","西双版纳","迪庆"],"内蒙古":["乌兰察布","乌海","兴安","包头","呼伦贝尔","呼和浩特","巴彦淖尔","赤峰","通辽","鄂尔多斯","锡林郭勒","阿拉善"],"北京":["东城","丰台","大兴","密云","平谷","延庆","怀柔","房山","昌平","朝阳","海淀","石景山","西城","通州","门头沟","顺义"],"台湾":["云林县","南投县","台东县","台中市","台北市","台南市","嘉义县","嘉义市","基隆市","宜兰县","屏东县","彰化县","新北市","新竹县","新竹市","桃园县","澎湖县","花莲县","苗栗县","连江县","金门县","高雄市"],"吉林":["吉林","四平","延边","松原","白城","白山","辽源","通化","长春"],"四川":["乐山","内江","凉山","南充","宜宾","巴中","广元","广安","德阳","成都","攀枝花","泸州","甘孜","眉山","绵阳","自贡","资阳","达州","遂宁","阿坝","雅安"],"天津":["东丽","北辰","南开","和平","宁河","宝坻","武清","河东","河北","河西","津南","滨海新区","红桥","蓟县","西青","静海"],"宁夏":["中卫","吴忠","固原","石嘴山","银川"],"安徽":["亳州","六安","合肥","安庆","宣城","宿州","巢湖","池州","淮北","淮南","滁州","芜湖","蚌埠","铜陵","阜阳","马鞍山","黄山"],"山东":["东营","临沂","威海","德州","日照","枣庄","泰安","济南","济宁","淄博","滨州","潍坊","烟台","聊城","莱芜","菏泽","青岛"],"山西":["临汾","吕梁","大同","太原","忻州","晋中","晋城","朔州","运城","长治","阳泉"],"广东":["东莞","中山","云浮","佛山","广州","惠州","揭阳","梅州","汕头","汕尾","江门","河源","深圳","清远","湛江","潮州","珠海","肇庆","茂名","阳江","韶关"],"广西":["北海","南宁","崇左","来宾","柳州","桂林","梧州","河池","玉林","百色","贵港","贺州","钦州","防城港"],"新疆":["乌鲁木齐","五家渠","伊犁","克孜勒苏","克拉玛依","博尔塔拉","吐鲁番","和田","哈密","喀什","图木舒克","塔城","巴音郭楞","昌吉","石河子","阿克苏","阿勒泰","阿拉尔"],"江苏":["南京","南通","宿迁","常州","徐州","扬州","无锡","泰州","淮安","盐城","苏州","连云港","镇江"],"江西":["上饶","九江","南昌","吉安","宜春","抚州","新余","景德镇","萍乡","赣州","鹰潭"],"河北":["保定","唐山","廊坊","张家口","承德","沧州","石家庄","秦皇岛","衡水","邢台","邯郸"],"河南":["三门峡","信阳","南阳","周口","商丘","安阳","平顶山","开封","新乡","洛阳","济源","漯河","濮阳","焦作","许昌","郑州","驻马店","鹤壁"],"浙江":["丽水","台州","嘉兴","宁波","杭州","温州","湖州","绍兴","舟山","衢州","金华"],"海南":["万宁","三亚","东方","中沙","临高","乐东","五指山","保亭","儋州","南沙","定安","屯昌","文昌","昌江","海口","澄迈","琼中","琼海","白沙","西沙","陵水"],"湖北":["仙桃","十堰","咸宁","天门","孝感","宜昌","恩施","武汉","潜江","神农架","荆州","荆门","襄阳","鄂州","随州","黄冈","黄石"],"湖南":["娄底","岳阳","常德","张家界","怀化","株洲","永州","湘潭","湘西","益阳","衡阳","邵阳","郴州","长沙"],"澳门":["圣安多尼堂区","大堂区","望德堂区","氹仔","花地玛堂区","路环岛","风顺堂区"],"甘肃":["临夏","兰州市","嘉峪关","天水","定西","平凉","庆阳","张掖","武威","甘南","白银","酒泉","金昌","陇南"],"福建":["三明","南平","厦门","宁德","泉州","漳州","福州","莆田","龙岩"],"西藏":["山南","拉萨","日喀则","昌都","林芝","那曲","阿里"],"贵州":["六盘水","安顺","毕节","贵阳","遵义","铜仁","黔东南","黔南","黔西南"],"辽宁":["丹东","大连","抚顺","朝阳","本溪","沈阳","盘锦","营口","葫芦岛","辽阳","铁岭","锦州","阜新","鞍山"],"重庆":["万州","万盛","两江新区","丰都","九龙坡","云阳","北碚","南岸","南川","双桥","合川","垫江","城口","大渡口","大足","奉节","巫山","巫溪","巴南","开县","彭水","忠县","梁平","武隆","永川","江北","江津","沙坪坝","涪陵","渝中","渝北","潼南","璧山","石柱","秀山","綦江","荣昌","酉阳","铜梁","长寿","黔江"],"陕西":["咸阳","商洛","安康","宝鸡","延安","榆林","汉中","渭南","西安","铜川"],"青海":["果洛","海东","海北","海南","海西","玉树","西宁","黄南"],"香港":["东区","中西区","九龙城区","元朗区","北区","南区","大埔区","屯门区","沙田区","油尖旺区","深水埗区","湾仔区","离岛区","荃湾区","葵青区","西贡区","观塘区","黄大仙区"],"黑龙江":["七台河","伊春","佳木斯","双鸭山","哈尔滨","大兴安岭","大庆","牡丹江","绥化","鸡西","鹤岗","黑河","齐齐哈尔"]};
        
        var conditionsEl = $('.hs-personality-conditions');
        //国家
        $(document).on('change', '.hs-personality-conditions [name=country]', function(){
            var v = this.value;
            var cityEl = $('.hs-personality-conditions [name=city]')
            var provinceEl = $('.hs-personality-conditions [name=province]')
            
            switch(v){
                case 'closed':
                    cityEl.parent().hide()
                    provinceEl.parent().hide()
                    break;
                case '中国':
                    var pdom = ['<option value="closed" >不限省份</option>'];
                    for(var i in chinaProvince){
                        pdom.push('<option value="'+ chinaProvince[i] +'" >'+ chinaProvince[i] +'</option>')
                    }
                    provinceEl.html(pdom.join(''))
                    cityEl.parent().hide()
                    provinceEl.parent().show()
                    break;
            }
        })
        //省份
        $(document).on('change', '.hs-personality-conditions [name=province]', function(){
            var v = this.value;
            var cityEl = $('.hs-personality-conditions [name=city]')
            if(v == 'closed'){
                cityEl.parent().hide()
            }else{
                var cdom = ['<option value="closed" >不限城市</option>'];
                var citys = chinaCity[v];
                for(var i in citys){
                    cdom.push('<option value="'+ citys[i] +'" >'+ citys[i] +'</option>')
                }
                cityEl.html(cdom.join(''))
                cityEl.parent().show()
            }
        })
        
    })

    //var data = null;
    var data = '{{ data | safe }}';
    var menuid = '{{ menuid | safe }}';

</script>
<script src="/static/admin/js/hswx/js/hs_selfmenu.js"></script>
<script>
    hsInitMenu(data);

    $(function(){
        /**
         * 选择图文
         */  
        $(document).on('click', '#hsSelNewsBtn', function(){
           hs_show_dialog('imgtext', {
               submit: function(e, d, i){

                   var media_id = i.substr(9);
                   var dialog = $(d._div);
                   var newsed = dialog.find('#'+i);
                   var del = '<a id="newsdel" class="clearfix" href="#">删除</a>'
                   if(newsed){
                       $('#newssed').show();
                       $('#newssed').html(newsed).append(del);
                       $('#newsxz').hide();
                   }
                   hsUpdateCurrentData({ act_list:[ { type:'news', value:media_id } ] })
               }
           })
        })
        /**
         * 点击删除选中的图文
         */
        $(document).on('click','#newsdel',function(){
            $('#newsxz').show();
            $('#newssed').hide();
            $('#newssed').html('');
        });

        //保存
        $(document).on('click', '#hsSubmitSave', function(){
            var newv = JSON.stringify(hsGetCurrentAllData());
            console.log(JSON.stringify(newv));

            $.post('/admin/mpbase/savecustommenu',
                {
                    newv : newv,
                    menuid : menuid
                },
                function(data){
                    if(data.errno == 0){
                        toastr.success(data.data.name);
                    }else{
                        toastr.error(data.errmsg);
                    }
                }
            );
        });
        
        //生成微信菜单
        $(document).on('click', '#hsSubmitSyncWx', function(){

            $.post('/admin/mpbase/asyncwxmenu',
                {},
                function(data){
                    if(data.errno == 0){
                        toastr.success(data.data.name);
                    }else{
                        toastr.error(data.errmsg);
                    }
                }
            )
        })
    })
</script>
{% endblock%}